<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>修理</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts-all.js"></script>
		<style>
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}

			h5 {
				margin-top: 30px;
				font-weight: bold;
			}

			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">数据分析</h1>
		</header>
		<<div class="mui-content">
			<div class="mui-content-padded">
				<h5>时间</h5>
				<div class="chart" id="lineChart"></div>
				<h5>类别</h5>
				<div class="chart" id="pieChart"></div>
			</div>
			</div>
	</body>
	<script>
		var getOption = function(chartType, data, title) {
			var chartOption;
			//饼图
			if (chartType == 'pie') {
				chartOption = {
					calculable: false,
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						data: data,
					}]
				}
			} else { //折线图
				chartOption = {
					legend: {
						data: title, //类别标题
					},
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: data
				};
			}
			return chartOption;
		}


		function init() {
			//获得数据
			mui.ajax({
				url: '', //url需要放服务器的地址,本地要放电脑的IP
				type: "post",
				async: false,
				data: {},
				dataType: "json",
				contentType: "application/x-www-form-urlencoded; charset=utf-8",
				jsonp: "jsoncallback",
				success: function(data) {
					//饼图的绘制
					var pie = data.pie;
					var arr = new Array();
					for (var i of pie) {
						var m = {
							'value': pie[i],
							'name': i
						};
						arr.push(m);
					}
					var pieChart = echarts.init(document.getElementById('pieChart'));
					pieChart.setOption(getOption('pie', arr, null));
					//折线图的绘制
					var line = data.line;
					var title = data.title; //标题列表
					var arr2 = new Array();
					for (var i of line) {
						var m = {
							name: title[i],
							type: chartType,
							data: line[i]
						};
						arr2.push(m);
					}
					var lineChart = echarts.init(document.getElementById('lineChart'));
					lineChart.setOption(getOption('line', arr2, title));
				},
				error: function() {
					mui.toast("服务器异常，请稍后再试");
				}
			});
		}
		
		init();
	</script>
</html>
